﻿@page "/listbox/drag-and-drop"

@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the drag and drop functionalities of a ListBox component. Drag an item or a group of selected items and drop it within the same list box or into another list box.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>ListBox</code> component allows the user to drag and drop a desired item from one list box into another list box. The drag and drop feature can be enabled by using the following properties,</p>
       <ul>
          <li>To drag and drop a desired item within the ListBox, the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop'>AllowDragAndDrop</a> property should be set to <b>true.</b></li>
          <li>To drag and drop between two listboxes, the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope'>Scope</a> property should be set to both the listboxes.</li>
       </ul>
    <p> In this sample, a list of countries is loaded in Group A and another list of countries is loaded in Group B. You can drag and drop an item or multiple items from Group A to Group B, and vice versa.</p>
    <p> More information about drag and drop functionalities of Blazor ListBox component can be found in the <a href='https://blazor.syncfusion.com/documentation/listbox/drag-and-drop/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="drag-drop-wrapper">
        <div class="listbox-control">
            <h4>Group A</h4>
            <SfListBox DataSource="@groupA" Scope="@scope" TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]">
                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings>
            </SfListBox>
        </div>
        <span class="e-swap-icon"></span>
        <div class="listbox-control">
            <h4>Group B</h4>
            <SfListBox DataSource="@groupB"  Scope="@scope"  TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]">
                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings>
            </SfListBox>
        </div>
    </div>
</div>


@code{
    private readonly string scope = "combined-list";
    private List<ListItem> groupA = new List<ListItem> {
        new ListItem { Name = "Australia", Code = "AU" },
        new ListItem { Name = "Bermuda", Code = "BM" },
        new ListItem { Name = "Canada", Code = "CA" },
        new ListItem { Name = "Cameroon", Code = "CM" },
        new ListItem { Name = "Denmark", Code = "DK" },
        new ListItem { Name = "France", Code = "FR" },
        new ListItem { Name = "Finland", Code = "FI" },
        new ListItem { Name = "Germany", Code = "DE" },
        new ListItem { Name = "Hong Kong", Code = "HK" }
    };
    private List<ListItem> groupB = new List<ListItem> {
        new ListItem { Name = "India", Code = "IN" },
        new ListItem { Name = "Italy", Code = "IT" },
        new ListItem { Name = "Japan", Code = "JP" },
        new ListItem { Name = "Mexico", Code = "MX" },
        new ListItem { Name = "Norway", Code = "NO" },
        new ListItem { Name = "Poland", Code = "PL" },
        new ListItem { Name = "Switzerland", Code = "CH" },
        new ListItem { Name = "United Kingdom", Code = "GB" },
        new ListItem { Name = "United States", Code = "US" }
    };
    public class ListItem
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
}

<style>

    @@font-face {
        font-family: 'swap-icon';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmXID+ZgAAAcgAAAA4aGVhZBR5I0cAAADQAAAANmhoZWEIVQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQAcAAAAAAHAAAAABm1heHABDgAZAAABCAAAACBuYW1ltM6mlQAAAgAAAAI9cG9zdFSIYnYAAARAAAAALgABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAARPvYwl8PPPUACwQAAAAAANixb1gAAAAA2LFvWAAAAAAD+AOaAAAACAACAAAAAAAAAAEAAAACAA0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAHAAAAAIAAAAAA/gDmgAFAAwAABMhBxcBITUxBTUhNycIA1HcLAFP/BAD8Pyv2ysBYs4uATy9AUDOLgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAJAAEAAQAAAAAAAgAHAAoAAQAAAAAAAwAJABEAAQAAAAAABAAJABoAAQAAAAAABQALACMAAQAAAAAABgAJAC4AAQAAAAAACgAsADcAAQAAAAAACwASAGMAAwABBAkAAAACAHUAAwABBAkAAQASAHcAAwABBAkAAgAOAIkAAwABBAkAAwASAJcAAwABBAkABAASAKkAAwABBAkABQAWALsAAwABBAkABgASANEAAwABBAkACgBYAOMAAwABBAkACwAkATsgRm9udCBTd2FwUmVndWxhckZvbnQgU3dhcEZvbnQgU3dhcFZlcnNpb24gMS4wRm9udCBTd2FwRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABGAG8AbgB0ACAAUwB3AGEAcABSAGUAZwB1AGwAYQByAEYAbwBuAHQAIABTAHcAYQBwAEYAbwBuAHQAIABTAHcAYQBwAFYAZQByAHMAaQBvAG4AIAAxAC4AMABGAG8AbgB0ACAAUwB3AGEAcABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwAEU3dhcAAAAAA=) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-swap-icon {
        font-family: 'swap-icon' !important;
        speak: none;
        font-size: 40px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        align-self: center;
        margin: 0 10px;
        transform: rotateX(180deg);
    }

    #drag-drop-wrapper .e-swap-icon:before {
        content: '\e700';
    }

    .control-section {
        min-height: 450px;
    }

    #drag-drop-wrapper {
        width: 85%;
        margin: auto;
        display: flex;
    }

    #savechange {
        margin-top: 15px;
        float: right;
        margin-bottom: -43px;
    }

    .e-bigger #savechange {
        margin-bottom: -51px;
    }

    .listbox-control {
        width: 350px;
        margin: auto;
    }

    @@media screen and (max-width: 590px) {
        .listbox-control,
        #drag-drop-wrapper {
            width: 100%;
        }

        .e-swap-icon {
            font-size: 30px;
        }
    }

    #right-pane {
        transform: none !important;
    }
</style>

